import React from 'react';
import Styles from '../index.module.scss';
// import Pic from 'https://api-haoke-web.itheima.net/img/profile/bg.png'
class User extends React.Component {
  state = {  }
  render() { 
    return (  
      <div>
        {/* 个人中心背景 */}
        <div className={Styles.user}>
          <div className={Styles.user_pic}>
            <img src='https://api-haoke-web.itheima.net/img/profile/bg.png' className={Styles.img} alt=""/>
          </div>
          {/* 用户选择 */}
          <div className={Styles.option_list}>
          <div className={Styles.option_item}>
            <span className={'iconfont icon-ind '+ Styles.iconfont}></span>
            <span className={Styles.text}>我的出租</span>
          </div>
          <div className={Styles.option_item}>
            <span className={'iconfont icon-record '+ Styles.iconfont}></span>
            <span className={Styles.text}>看房记录</span>
          </div>
          <div className={Styles.option_item}>
            <span className={'iconfont icon-identity '+ Styles.iconfont}></span>
            <span className={Styles.text}>成为房主</span>
          </div>
          <div className={Styles.option_item}>
            <span className={'iconfont icon-myinfo '+ Styles.iconfont}></span>
            <span className={Styles.text}>个人资料</span>
          </div>
          <div className={Styles.option_item}>
            <span className={'iconfont icon-cust '+ Styles.iconfont}></span>
            <span className={Styles.text}>联系我们</span>
          </div>
          <div className={Styles.option_item}>
            {/* <span className={'iconfont icon-cust '+ Styles.iconfont}></span>
            <span className={Styles.text}>联系我们</span> */}
          </div>
          </div>
        {/* 广告栏 */}
        <div className={Styles.advertising}>
          <img className={Styles.img} src="https://api-haoke-web.itheima.net/img/profile/join.png" alt=""/>
        </div>
        {/* 登录框 */}
        <div className={Styles.login}>
          <div className={Styles.head_portrait}>
            <img className={Styles.head_img} src="https://api-haoke-web.itheima.net/img/profile/avatar.png" alt=""/>
          </div>
          <div className={Styles.user_name}>游客</div>
          <div className={Styles.login_button}>
            <span>去登录</span>
          </div>
        </div> 
        </div>
      </div>
    );
  }
}
 
export default User;